<template>
    <el-card shadow="never" class="rr-view-ctx-card">

        <div class="mod-admin__education_detail">
            <div class="header">
                <div class="header-left">
                    <div class="title">永康市教育局</div>
                    <el-tag type="success">启用</el-tag>
                </div>
            </div>
            <el-divider></el-divider>
            <table border="1" cellspacing="0" cellpadding="0" class="table">
                <tr>
                    <th>管理账户名</th>
                    <td>YKSJYJ</td>
                    <th>教育局所属行政规划</th>
                    <td>浙江省>金华市>永康市</td>
                </tr>

                <tr>
                    <th>教育局责任人</th>
                    <td>张三</td>
                    <th>责任人联系方式</th>
                    <td>1111-1111-1111</td>
                </tr>
                <tr>
                    <th>教育局地址</th>
                    <td>浙江省金华市永康市金城路 25 号</td>
                </tr>
            </table>

            <table border="1" cellspacing="0" cellpadding="0" class="table">
                <tr>
                    <th>运维责任人</th>
                    <td>李四</td>
                    <th>责任人联系方式</th>
                    <td>1111-1111-1111</td>
                </tr>
            </table>
            <el-divider></el-divider>
            <div class="header header-bg">
                <div class="header-left">
                    <div class="title">合同文件</div>
                    <div class="tip">共计 3 个</div>
                </div>
                <div class="header-right">
                    <el-button type="primary" icon="el-icon-plus" @click="axElUploadHandle">新增</el-button>
                </div>
            </div>
            <div class="file">
                <div class="file-item">
                    <img src=""
                        alt="">
                    <div class="file-item_title">永康市教育局校园食品安全膳食营养2024年...合作协议.pdf</div>
                </div>
                <div class="file-item">
                    <img src="https://img1.baidu.com/it/u=4145081759,2780170407&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=300"
                        alt="">
                    <div class="file-item_title">永康市教育局校园食品安全膳食营养2024年...合作协议.png</div>
                </div>
            </div>
            <ax-el-upload ref="axElUploadRef" @refreshDataList="state.getDataList"></ax-el-upload>
        </div>
    </el-card>
</template>
  
<script lang="ts" setup>
import useView from "@/hooks/useView";
import { reactive, ref, toRefs } from "vue";
import AddOrUpdate from "./education-add-or-update.vue";
import { ElMessageBox, ElMessage } from 'element-plus';
import AxElUpload from "./ax-el-upload.vue"

const view = reactive({
    getDataListURL: "/sys/user/page",
    getDataListIsPage: true,
    deleteURL: "/sys/user",
    deleteIsBatch: true,
    exportURL: "/sys/user/export",
    dataForm: {
        name: ""
    },
    filterText: ""
});

const data = reactive([{
    label: '浙江省',
    children: [{
        label: '杭州市',
        children: [{
            label: '上城区'
        },
        {
            label: '西湖区'
        },
        {
            label: '滨江区'
        }
        ]
    },
    {
        label: '金华市',
        children: [{
            label: '浦江县'
        }]
    },
    {
        label: '永康市',
        children: [{
            label: '新市区'
        }]
    }
    ]
}])

const defaultProps = reactive({
    children: 'children',
    label: 'label'
})


const state = reactive({ ...useView(view), ...toRefs(view) });

const axElUploadRef = ref();
const axElUploadHandle = (id?: number) => {
    axElUploadRef.value.init(id);
};

const treeRef = ref()

const areaAdd = () => {
    ElMessageBox.prompt('请输入区域名称', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^\\S+$/,
        inputErrorMessage: '请输入'
    }).then(({ value }) => {
    }).catch(() => {
    });
}

const areaUpdate = () => {
    ElMessageBox.prompt('请输入区域名称', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^\\S+$/,
        inputErrorMessage: '请输入'
    }).then(({ value }) => {
    }).catch(() => {
    });
}

const areaDelete = () => {
    const node = treeRef.value.getCurrentNode();
    console.log(node.label)
    ElMessageBox.confirm('此操作将永久删除该区域, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        ElMessage.success('删除成功!');
    }).catch(() => {
    });
}
</script>
<style lang="scss">
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    &-left {
        display: flex;
        align-items: center;

        .title {
            font-size: 16px;
            font-weight: bold;
            padding-right: 20px;
        }
    }
}

.header-bg {
    background-color: #f7f7f7;
    padding: 10px;
    border-radius: 10px;
}

table {
    width: 100%;
    border-color: #f0f0f2 !important;
    text-align: left;
    margin-bottom: 10px;

    th {
        background-color: #f2f3f8;
        width: 20%;
        padding: 6px 20px;
        color: #0e4c98;
        font-weight: bold;
        font-size: 14px;
    }

    td {
        width: 30%;
        padding: 10px;
    }
}

.file {
    display: flex;

    &-item {
        width: 200px;

        img {
            width: 140px;
            height: 180px;
            object-fit: contain;
        }

        &_title {
            width: 140px;
        }
    }
}
</style>